<template>
  <a-modal
    :title="title"
    :width="720"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :maskClosable="false"
    :destroyOnClose="true"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="书籍名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['name', { rules: [{ required: true, min: 2, message: '请输入至少2个字符' }] }]" />
        </a-form-item>
        <a-form-item label="是否授权" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-decorator="['auth', { initialValue: 0, rules: [{ required: true }] }]">
            <a-radio :value="0">否</a-radio>
            <a-radio :value="1">需要</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="书籍地址" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['book_dir', { rules: [{ required: true, message: '请输入书籍地址' }] }]" />
        </a-form-item>
        <a-form-item label="说明" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea v-decorator="['desc']" :auto-size="{ minRows: 3, maxRows: 5 }" />
        </a-form-item>
        <a-form-item label="广告名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select
            v-decorator="['ad_id']"
            show-search
            :default-active-first-option="false"
            :show-arrow="false"
            :filter-option="false"
            :not-found-content="null"
            :options="adList"
            @search="getOptions"
          >
          </a-select>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import _ from 'lodash'
import * as Api from '@/api/book'
/** @var {BookActionType} BookActionType */
import BookActionType from '@/common/enum/bookActionType'
import { getOptions } from '@/api/ad'
export default {
  components: {},
  data() {
    return {
      BookActionType,
      // 对话框标题
      title: '',
      // 标签布局属性
      labelCol: { span: 7 },
      // 输入框布局属性
      wrapperCol: {
        span: 13
      },
      // modal(对话框)是否可见
      visible: false,
      // modal(对话框)确定按钮 loading
      confirmLoading: false,
      // 当前表单元素
      form: this.$form.createForm(this),
      // 当前记录
      record: {},
      sid: null,
      storageParams: [],
      adList: []
    }
  },
  methods: {
    /**
     * 显示对话框
     */
    edit(record) {
      // 显示窗口
      this.visible = true
      // 当前记录
      this.confirmLoading = true
      this.record = record || {}
      this.getOptions()
      this.setFieldsValue()
    },
    getOptions(name) {
      getOptions({ name }).then((res) => {
        this.adList = res.data
        this.confirmLoading = false
      })
    },

    /**
     * 设置默认值
     */
    setFieldsValue() {
      const {
        record,
        form: { setFieldsValue }
      } = this
      // 设置表单内容
      this.$nextTick(() => {
        const d = _.pick(record, ['name', 'desc', 'book_dir', 'ad_id', 'auth'])
        setFieldsValue(d)
      })
    },

    /**
     * 确认按钮
     */
    handleSubmit(e) {
      e.preventDefault()
      // 表单验证
      const {
        form: { validateFields }
      } = this
      validateFields((errors, values) => {
        // 提交到后端api
        if (!errors) {
          this.onFormSubmit(values)
        }
      })
    },

    /**
     * 关闭对话框事件
     */
    handleCancel() {
      this.visible = false
    },

    /**
     * 提交到后端api
     */
    onFormSubmit(values) {
      this.confirmLoading = true
      values.id = this.record.id || 0
      Api[this.record.id ? 'editOldBook' : 'addOldBook'](values)
        .then((result) => {
          // 显示成功
          this.$message.success(result.message, 1.5)
          // 关闭对话框事件
          this.handleCancel()
          // 通知父端组件提交完成了
          this.$emit('handleSubmit', values)
        })
        .finally((result) => {
          this.confirmLoading = false
        })
    },
    onForceUpdate(bool = false) {
      this.$forceUpdate()
      // bool为true时再执行一次 $forceUpdate, 特殊情况下需执行两次，原因如下：
      // 第一次执行 $forceUpdate时, 新元素绑定v-decorator无法获取到form.getFieldValue
      bool &&
        setTimeout(() => {
          this.$forceUpdate()
        }, 10)
    }
  }
}
</script>
